/**
 * @功能描述: 抽屉组件样式文件
 * @author: lzn
 * @date: 2022-09-30 14:52:20
 * @version: 1.0
 */
@import '../../style/index.scss';

$drawer-content-witdh: 378px;
$drawer-content-height: 378px;

// 抽屉内容框定位相关
@mixin drawer-content--layout {
  position: absolute;
  z-index: $root-z-index;
  display: flex;
  flex-direction: column;
}

// 抽屉容器样式
@include b(drawer) {
  position: fixed;
  inset: 0;
  z-index: $root-z-index;
}

// 抽屉蒙板样式
@include b(drawer-mask) {
  position: absolute;
  inset: 0;
  background-color: $mask-color;
}

// 抽屉主体容器样式
@include b(drawer-content) {
  @include drawer-content--layout;
  background-color: $color-white;
}

// 左抽屉定位
@include b(drawer-content-left) {
  top: 0;
  left: 0;
  bottom: 0;
  width: $drawer-content-witdh;
}

// 右抽屉定位
@include b(drawer-content-right) {
  top: 0;
  right: 0;
  bottom: 0;
  width: $drawer-content-witdh;
}

// 上抽屉定位
@include b(drawer-content-top) {
  right: 0;
  left: 0;
  top: 0;
  height: $drawer-content-witdh;
}

// 下抽屉定位
@include b(drawer-content-bottom) {
  right: 0;
  left: 0;
  bottom: 0;
  height: $drawer-content-witdh;
}

// 标题容器样式
@include b(drawer-header) {
  display: flex;
  flex: 0;
  align-items: center;
  padding: 16px 24px;
  font-size: 16px;
  line-height: 22px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  >svg {
    margin-right: 12px;
    cursor: pointer;
  }
  >div {
    flex: 1;
  }
}

// 抽屉内容容器样式
@include b(drawer-body) {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow: auto;
}